<!DOCTYPE html>
<html>
    <head>
		<title>消息详情</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<style>
			.nav-tabs{background: #FFF;margin-top: 50px;padding-left: 15px;}
			.nav > li > a:focus, .nav > li > a:hover{background: #FFF;}
			.monitor_top{height:24px;padding: 0;}
			.monitor_left , .monitor_right{padding: 0;height:24px;line-height: 24px;bottom: 0;}
			.monitor_left{padding-left: 3px;}
			.monitor_right{right: 3px;text-align: right;}
			.title_top{text-align: center;}
			.rq{padding: 0;}
			#new_detail{text-align: left;position: relative; width: 100%;  margin-top: 50px;}
			.head{position: relative; width: 96%; margin: 0 2%; padding: 10px 0; text-align: left;}
			.head::after{content: ''; background: #eeeeee; height: 1px; width: 100%; left: 0; bottom: 0; position: absolute;}
			.head .h-tit{position: relative; width: 100%; height: 52px; line-height: 52px; color: #333333; font-size: 18px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
			.head .h-pre, .head .h-time{position: relative;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 24px; line-height: 24px; color: #999999; }
			.cont-txt{position: relative;display: block;overflow: hidden; font-size: 16px; color: #666666; padding: 10px 0; margin: 0 2%; width: 96%; text-indent: 2em; text-align:left; line-height: 28px;}
			.link{margin-left:10%;font-size: 16px; }
		</style>    
    </head>
	<body class="">
		<div class="col-xs-12 title_top">
			<div class="col-xs-3 rq back">
				<a href="#">
					<div style="float: left;"><img src="images/icon_left.png"/></div>
				</a>
			</div>
			<div class="col-xs-6 new_title">消息详情</div>
			<div class="col-xs-3" style="padding-right: 0;">
			</div>
		</div>
		<div id="myTabContent" class="col-xs-12 tab-content" >
			<fieldset id="new_detail">
				<div class="head">
				    <div class="h-tit">标题</div>
				    <div class="h-pre">发送人：能工科技</div>
				    <div class="h-time">时间：2018.08.27 12:00:00</div>
			    </div>
			    <div class="cont-txt">
			    	消息内容。
			    </div>
			    <div class="link">
			    	
			    </div>
			</fieldset>
		</div>
	</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script src="js/jquery.min.js"></script>
<script >
	mui.plusReady(function () {
		var token = get_token();
		var params = get_ws();
		var data = {};
		data.api = 'get-user-single-message';
		data.token = token;
		data.messageId = params.messageId;
		mui.ajax(project_cofnig.service_url, {
			async: true,
			dataType: 'json',
			data: data,
			success: function (ref) {
				if(ref.code == 0){
					$(".h-tit").html(ref.data.title);
					$(".h-pre").html("发送人："+ref.data.senderName);
					$(".h-time").html("时间："+ref.data.sendDate);
					$(".cont-txt").html(ref.data.content);
					var contentLinks = ref.data.contentLink.split("<br/>");
					var contentLinkTitles = ref.data.contentLinkTitle.split("<br/>");
					var _html = '';
					contentLinks.forEach(function(value,index){
						_html += '<a class="mui-tab-item mui-active" data-url="'+value+'" >';
						_html += '<i class="mui-icon iconfont icon-lianjie1"></i>';
				        _html += '<span class="mui-tab-label">'+contentLinkTitles[index]+'</span></a><br/>';	
					});
					$(".link").html(_html);
				}
			}
		});
		mui(".link").on("tap",".mui-tab-item",function(){
			var _url = $(this).data('url');
			redirect('redirect.html',{url:_url});
		});
		mui(".title_top").on("tap",".back",function(){
			mui.back();
		});
	});
</script>